<link type="text/css" href="/Public/Css/pop.css" rel="stylesheet" /> 
<link type="text/css" href="/Public/Js/jquery-ui/jquery.ui.all.css" rel="stylesheet" /> 
  
<script type="text/javascript" src="/Public/Js/jquery-ui/jquery.ui.core.js"></script>  
<script type="text/javascript" src="/Public/Js/jquery-ui/jquery.ui.widget.js"></script> 
<script type="text/javascript" src="/Public/Js/jquery-ui/jquery.ui.mouse.js"></script> 
<script type="text/javascript" src="/Public/Js/jquery-ui/jquery.ui.draggable.js"></script> 

<script type="text/javascript" src="__PUBLIC__/Js/jquery.form.js"></script>
<link href="__PUBLIC__/Js/setavatar/css/imgareaselect-default.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="__PUBLIC__/Js/setavatar/jquery.imgareaselect.min.js"></script>
<php>
/**
*	调用图片生成工具thumb.php的封装方法．
**/
/**
$imgEditConfig = array(	'uploadTmpImgPath'=>U('Admin://ImgEdit/edit',array('t'=>'upload')) //上传临时文件图片路径，未切割图片作准备。
						,'doImgEditPath'=>U('Admin://ImgEdit/edit',array('t'=>'save'))		//进行图片切割并保存
						,'previewPath'=>U('Admin://ImgEdit/preview')
						,'default_alertpic'=>"/Public/Js/smsEditer/img/edit_alert.jpg"//默认图片提示图片
						,'relpath'=>'imgedit'//默认图片提示图片
						,'picname'=>111111//默认图片提示图片
						,'towidth'=>400//默认图片提示图片
						,'toheight'=>250//默认图片提示图片
						,'js_fun_after_save'=>''//保存成功后执行的js方法，只有一个参数保存的图片路径
						
);
**/

if($imgEditConfig['towidth'] < 270){
	$smsing_X = $imgEditConfig['towidth'];
	$smsing_Y = $imgEditConfig['toheight'];
}else{
	$smsing_X = 270;
	$smsing_Y = (floatval(270)/$imgEditConfig['towidth'])*$imgEditConfig['toheight'];
}

$smsing_Ratio = $smsing_X.':'.$smsing_Y;
</php>
			 	
<div class="left_area">
    <div id='show_bg'>
    	图片：图片将裁剪成，宽：{$imgEditConfig['towidth']} 高：{$imgEditConfig['toheight']}
		<div id="photo_big4edit" style="width: {$smsing_X}px; height: {$smsing_Y}px; 
							border:1px solid #B4B5AF;overflow: hidden;text-align: center;">
			<img id="photo_big" src="{:getPhotoFromThumb($imgEditConfig['default_alertpic'],$smsing_X,$smsing_Y,false)}"/>
		</div>
	</div>
</div>
			
<div class="right_area">
   	<div id='upload_area'>
   		<div style="display: block; margin-top: -20px;" class="setItemsInfo">
		    <div style="margin:0px 15px;">
				<div style="padding:10px 0;color:#666;"> 
					<form style="width:220px;float: left;" enctype="multipart/form-data" method="post" id="uploadpic" name="upform" dotype="ajax" callback="uploadpic" target="upload_target" 
						  action="{$imgEditConfig['uploadTmpImgPath']}">
						<input type="file" name="Filedata" onchange="douploadpic()" id="Filedata"/> 
						<span style="display:none;" id="loading_gif">
							<img src="__PUBLIC__/Js/avatar/loading.gif" align="absmiddle" />上传中，请稍侯......
						</span>  
					</form>
					<form style="width:130px;float: right;" enctype="multipart/form-data" method="post" 
							id='upform' name="upform" dotype="ajax" callback="dosaveface" target="_blank" 
							action="{$imgEditConfig['doImgEditPath']}">
						<input type="hidden" name="relpath" value="{$imgEditConfig['relpath']}">
						<input type="hidden" name="picname" value="{$imgEditConfig['picname']}">
						<input type="hidden" name="towidth" value="{$imgEditConfig['towidth']}">
						<input type="hidden" name="toheight" value="{$imgEditConfig['toheight']}">
						
						<input type="hidden" name="picurl">
						<input type="hidden" name="x1">
						<input type="hidden" name="y1">
						<input type="hidden" name="x2">
						<input type="hidden" name="y2">
						<input type="hidden" name="w">
						<input type="hidden" name="h">
						<input type="submit" class="btn_w" value="确定" /> 
						<input type="button" class="btn_w" value="取消" onclick="unSetImg()" />
					</form>
				</div>
				<div class="clear"></div> 
				<div class="picSettings">
					<div id="photo" class="left" style="width:100%; height:320px;">
					</div>
				</div>
        	</div>
		</div>
	</div>
</div>

<div class="clear"></div>
		
<form action="{$imgEditConfig['previewPath']}" method='post' id='privewform' target="_blank">
	<input type='hidden' name='smsimg' id='smsimg' value="{$_smsEditer_default_sendpic}">
	<input type='hidden' name='smstext' id='smstext'>
	<input type='hidden' name='xyOffset' id='xyOffset'>
	<input type='hidden' name='textcolor' id='textcolor'>
	<input type='hidden' name='smsicon' id='smsicon'>
	<input type='hidden' name='ispreview' id='ispreview' value='yes'>
</form>	
	
<script type="text/javascript">
	var hs = document.location.hash;
	var up_pic_width ={$smsing_X};
	var up_pic_height ={$smsing_Y};
	var currentimgpath = "{$imgEditConfig['default_alertpic']}";
	
	_tmp_initForm('uploadpic');
	_tmp_initForm('upform');

	function _getThumbBaseUrl(w,h,imgpath){
		//rand为了避免加载缓存而设置的随机数
		rand = Math.random();
		_imgurl = "<php>echo ''.$_SERVER['HTTP_HOST'].getAttachUrl('');</php>"+imgpath;
		if(rand==null)_baseurl = "/thumb.php?w="+w+"&h="+h+"&url=http://";
		else _baseurl = "/thumb.php?w="+w+"&h="+h+"&rand="+rand+"&url=http://";
		return _baseurl+_imgurl;
	}
	
	function _tmp_initForm(formid){
		//监听 form 表单提交
	  	$("#"+formid).bind('submit', function() {
						var callbackfun = $(this).attr('callback');
						var type   = $(this).attr('type');
						var options = {
						    success: function(txt) {
						    	//alert(txt);
						    	//txt = eval("("+txt+")");
									if(callbackfun){
										callback(eval(callbackfun),txt);
									}else{
										  if(txt.boolen){
											  ui.success( txt.message );
										  }else{
											  ui.error( txt.message );
										  }
										  	 
									}
						    }
						};		
	       				$(this).ajaxSubmit(options);
			 			return false;
	    });
	}
	
	function callback(fun,argum){
		fun(argum);
	}
	
	/**裁剪完的图片上传后返回结果的处理函数**/
	function dosaveface(txt){
		//alert(txt);
		txt = eval('('+txt+')');
		if (txt.status==1) {
			k_success('图片保存成功！');
			currentimgpath = _getThumbBaseUrl( '{$smsing_X}' , '{$smsing_Y}' ,txt.new_img_rel_path);
			unSetImg();
			<php>if( !empty($imgEditConfig['js_fun_after_save']) ){</php>
				{$imgEditConfig['js_fun_after_save']}(txt.new_img_rel_path);
			<php>}</php>
		}else {
			k_error('图片保存失败！');
		}
	}
	
	/**上传要裁减的图片**/
	function douploadpic(){
		//alert('111');
		$('#loading_gif').show();
		$('input[name="Filedata"]').hide();
		var options = {
						error:function(txt){
								//alert('error:'+txt);
						},
					    success: function(txt) {
					    	//alert('success:'+txt);
							uploadpic(txt);
					    }
		};		
		$('#uploadpic').ajaxSubmit(options);
		return false;		
	}
	
	var imgrs;
	/**上传裁减的图片成功后，进行的初始化函数。设置页面让用户进行图片裁减。**/
	function uploadpic(txt){
		//alert(txt);
		txt = eval('('+txt+')');
		if(txt.code==1){
			var tmpDate = new Date(); 
			set_UP_W_H(txt.data['picwidth'],txt.data['picheight']);
			var defautlv = ( txt.data['picwidth'] > txt.data['picheight']) ?txt.data['picheight']:txt.data['picwidth'];
	//		$("#photo").attr('src',txt.data['picurl']+'?t='+ tmpDate.getTime());
			$("#photo").html("<img id='photo_img' src="+txt.data['picurl']+'?t='+ tmpDate.getTime()+">");
			$("input[name=picurl]").attr('value',txt.data['picurl']);
		 	$("#photo_big").attr('src',txt.data['picurl']+'?t='+ tmpDate.getTime());
		
		 	imgrs = $('#photo_img').imgAreaSelect({ 
						x1: 0, 
						y1: 0,
					  	x2: {$smsing_X}, 
						y2: {$smsing_Y}, 
						handles: true,
						onInit:preview,
						onSelectChange:preview,
						onSelectEnd:onSelectEnd,
						//aspectRatio: '1:1',
						aspectRatio: '{$smsing_Ratio}',
						instance: true,
						parent:$('#photo')
						});
			$('#loading_gif').hide();
		 }else{
		 	alert(txt.message);
		 }
	}
	
	//重新上传图片
	function unSetImg(){
		//var defaultpic = '{$_smsEditer_default_editpic}';
		//alert(currentimgpath);
		$('input[name="Filedata"]').show();
		$('loading_gif').hide();
		$("#photo").html("");
		$("input[name=picurl]").attr('value','');
	 	$("#photo_big").attr('src',currentimgpath);
	 	$('#photo_big').attr('style','position: relative;');
	 	imgrs.setOptions({ remove:true });
	 	imgrs.update();
	};	
	
	function set_UP_W_H(w,h){
		up_pic_width = w;
		up_pic_height = h;
	}	
		
	function onSelectEnd(img,selection){
	    $('input[name=x1]').val(selection.x1);
	    $('input[name=y1]').val(selection.y1);
	    $('input[name=x2]').val(selection.x2);
	    $('input[name=y2]').val(selection.y2); 
	    $('input[name=w]').val(selection.width); 
	    $('input[name=h]').val(selection.height); 
	}
		
	function preview(img, selection) {
			onSelectEnd(img,selection);
			var big_scaleX = {$smsing_X} / (selection.width || 1);
	    var big_scaleY = {$smsing_Y} / (selection.height || 1);
		
	    $('#photo_big').css({
	        width: Math.round(big_scaleX * up_pic_width) + 'px',
	        height: Math.round(big_scaleY * up_pic_height) + 'px',
	        marginLeft: '-' + Math.round(big_scaleX * selection.x1) + 'px',
	        marginTop: '-' + Math.round(big_scaleY * selection.y1) + 'px'
	    });
	}		
	
</script>

<style>
.edit_panel {
    background-color: #FFFFFF;
    border: 1px solid #C4C2C2;
    padding: 0;
	width: 1300px;
	height: 820px;
}
.edit_panel .left_area {
    background-color: #FFFFFF;
    float: left;
    padding: 30px 10px 10px;
    width: 290px;
}
.edit_panel .left_area #show_bg {
    width: 100%;
}
.edit_panel .left_area textarea {
    border: 1px solid #CCCCCC;
    color: #333333;
    font-size: 10pt;
    height: 142px;
    line-height: 20px;
    overflow: hidden;
    padding: 5px;
    width: 230px;
}
.edit_panel .right_area {
    background-color: #FFFFFF;
    float: right;
    height: 320px;
    padding: 20px 0 10px;
     width: 950px;
}
.edit_panel .panel-title {
    background: -moz-linear-gradient(-90deg, #FFFFFF, #DDDDDD) repeat scroll 0 0 transparent;
    height: 28px;
    line-height: 28px;
    margin: 0;
    overflow: hidden;
    padding: 0;
}
.edit_panel .panel-title ul.column-tab > li:first-child {
    border-left: medium none;
    margin-left: 0;
}
.edit_panel .panel-title .column-tab .tab-title-current {
    background-color: #FFFFFF;
}
.edit_panel .panel-title .column-tab .tab-title-partition {
    width: 221px;
}
.edit_panel .panel-title ul.column-tab > li {
    border-left: 1px solid #C4C2C2;
    border-right: 1px solid #C4C2C2;
    float: left;
    margin-left: -1px;
}
.edit_panel .panel-title .column-tab .tab-title {
    cursor: pointer;
    font-weight: bold;
    padding: 0 10px;
    text-align: center;
}
.edit_panel .input {
    color: #333333;
    font-size: 10pt;
    height: 40px;
    padding: 10px;
    width: 240px;
}
.edit_panel .hide {
    display: none;
}
.edit_panel #icon_area {
    border: 1px solid #CCCCCC;
    position: absolute;
}
.edit_panel #icon_area table {
    background-color: #FFFFFF;
}
.edit_panel #icon_area table td {
    border: 1px solid #DBDBDB;
    cursor: pointer;
    height: 25px;
    width: 25px;
}
.edit_panel #icon_area table td img {
    height: 25px;
    margin: 0 0;
    width: 25px;
}
</style>